<!--安全日志-->
<template>
  <div id="logDataIndex" class="app-container flex-row">
    <div class="common-sub-vertical-menu">
      <ul class="vertical-menu">
        <li v-for="item in views" :key="item.view" :class="selectedView.view===item.view?'active':''" @click="changeView(item)">
          <i class="icon iconfont " :class="item.icon" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>
    <div class="conmmon-container-main flex-main">
      <component :is="selectedView.view" />
    </div>
  </div>
</template>
<script>
import systemLog from './systemLog'
import errorLog from './errorLog'
import loginLog from './loginLog'

export default {
  components: { systemLog, errorLog, loginLog },

  data() {
    return {
      selectedView: {},
      views: []
    }
  },
  watch: {
    searchValue(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.views = []
    if (this.$P.hasMenu('systemLog')) {
      this.views.push(this.getMenu('systemLog'))
    }
    if (this.$P.hasMenu('errorLog')) {
      this.views.push(this.getMenu('errorLog'))
    }
    if (this.$P.hasMenu('loginLog')) {
      this.views.push(this.getMenu('loginLog'))
    }
    if (this.views.length === 0) {
      this.$router.push({ path: '/noPermission' })
      return
    }
    var queryView = this.$route.query.view
    if (queryView) {
      var view = this.views.filter(item => {
        return item.view === queryView
      })
      if (view.length > 0) {
        this.selectedView = view[0]
      }
    } else {
      if (this.views.length > 0) {
        this.selectedView = this.views[0]
      }
    }
  },
  methods: {
    getMenu(code) {
      var { icon, title } = this.$P.getMenu(code)
      return { view: code, name: title, icon: icon }
    },
    changeView(val) {
      this.selectedView = val
    }
  }
}
</script>

<style lang="scss" >

</style>
